@color-primary: #1b5284;
@color-danger: #e44831;

.el-button {
  border-radius: 4px;
  border: 1px solid;
  vertical-align: top;
  font-size: 14px;

  & > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    img {
      margin-right: 10px;
      width: 20px;
      height: 20px;
      vertical-align: top;
    }
  }

  &.el-button--mini {
    padding: 1px 8px;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
  }

  &.el-button--small {
    padding: 0 25px;
    height: 36px;
  }

  &.el-button--default {
    border-color: @color-primary;
    color: @color-primary;
    box-shadow: 0 1px 2px 0 rgba(9, 78, 197, 0.3);

    &:hover {
      background-color: #0e87f7;
      border-color: #0e87f7;
      color: #fff;
    }

    &:active {
      background-color: #0b5fd5;
      border-color: #0b5fd5;
    }
  }

  &.el-button--primary {
    border-color: @color-primary;
    background-color: @color-primary;
    color: #fff;
    box-shadow: 0 2px 4px 0 rgba(9, 78, 197, 0.3);

    &:hover {
      background-color: #0e87f7;
      border-color: #0e87f7;
    }

    &:active {
      background-color: #0f35b7;
      border-color: #0f35b7;
    }

    &.is-plain {
      border-color: @color-primary;
      color: @color-primary;
      background-color: #fff;
      box-shadow: 0px 2px 4px 0px rgba(9, 78, 197, 0.3);

      &:hover {
        border-color: @color-primary;
        color: @color-primary;
        // color: #fff;
      }

      &:active {
        background-color: #0b5fd5;
        border-color: #0b5fd5;
        color: #fff;
      }
    }
  }

  &.el-button--danger {
    //border-color: @color-danger;
    &.is-plain {
      border-color: @color-danger;
      background-color: #fff;
      color: @color-danger;
      box-shadow: 0px 1px 2px 0px rgba(228, 72, 49, 0.3);

      &:hover {
        background-color: rgba(228, 72, 49, 0.3);
        border: none;
        color: #fff;
      }

      &:active {
        background-color: #d5260c;
        border-color: #d5260c;
        color: #fff;
      }
    }
  }
  &.el-button--text {
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    &:hover {
      border-color: transparent;
    }
    &:active {
      border-color: transparent;
    }
  }
  &.custom-large {
    width: 300px;
    height: 52px;
    font-size: 18px;
    letter-spacing: 4px;
  }

  &.custom-large + &.custom-large {
    margin-left: 30px;
  }
  &.noborder {
    border: none;
    box-shadow: none;
    background: none;
  }
}
.el-button + .el-button {
  margin: 0 0 0 10px !important;
}

// switch
// .el-switch {
//   .el-switch__core {
//     background-color: #fff;
//     border: 1px solid #666666;
//     width: 48px !important;
//     height: 24px;
//     border-radius: 24px;

//     &:after {
//       top: 0;
//       left: -1px;
//       box-sizing: border-box;
//       width: 22px;
//       height: 22px;
//       background: #ffffff;
//       border: 1px solid #666666;
//       border-radius: 12px;
//     }
//   }

//   &.is-checked {
//     .el-switch__core {
//       background-color: @color-primary !important;
//       box-shadow: 0px 2px 4px 0px rgba(9, 78, 197, 0.3) !important;
//       &:after {
//         margin-left: -21px;
//         border-color: #0b5fd5;
//       }
//     }
//   }
//   //
//   //&.is-disabled {
//   //  .el-switch__core {
//   //    background-color: #f8f8fb;
//   //    border: 1px solid #f2f2f2;
//   //    &:after {
//   //      background: #f8f8fb !important;
//   //      border: 1px solid #f2f2f2 !important;
//   //    }
//   //  }
//   //
//   //}
// }

// 搜索图标更换
// .el-icon-search:before {
//   vertical-align: sub;
//   content: "";
//   background-image: url("../../images/icon-search.png");
//   background-position: center;
//   background-size: 20px;
//   display: inline-block;
//   width: 20px;
//   height: 20px;
// }

// .el-select .el-input .el-select__caret {
//   position: relative;

//   transform: rotateZ(0deg);

//   &.is-reverse {
//     transform: rotateZ(180deg);
//   }
// }

// .el-icon-arrow-up:before {
//   position: absolute;
//   top: 50%;
//   margin-top: -10px;
//   left: 50%;
//   margin-left: -10px;
//   //vertical-align: m;
//   content: "";
//   background-image: url("../../images/icon-arrow-down.png");
//   background-position: center;
//   background-size: 20px;
//   //display: inline-block;
//   width: 20px;
//   height: 20px;
// }
